import React from 'react'
import PropTypes from 'prop-types'
import {Table, Tag, Card, Row, Col, Form, Input, InputNumber, Radio, Select, DatePicker,Button} from 'antd'
import styles from './advanceMass.less'
import {color} from '../../../utils'
import moment from 'moment'

const FormItem = Form.Item
const {RangePicker} = DatePicker
const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;
const Option = Select.Option;
const formItemLayout = {
  labelCol: {
    span: 5,
  },
  wrapperCol: {
    span: 19,
  },
}

const handleChange = () => {
  console.log("run")
}

const onChange = () => {
  console.log("run")
}

function AdvanceMass({...advanceMassProps}) {
  return (
    <div className={styles.comments}>
      <Row gutter={16}>
        <Col span={8}>
          <Card title="设置高级群发内容" bordered={true} extra={<Button type="primary" ghost>点击设置</Button>}>
            <div className>
              <div style={{backgroundColor:'#EBEBEB',height:"480px",position:'relative'}}>
                <div><img style={{width:'100%',height:'48px'}} src={'/images/top.jpg'}/></div>
                <div style={{position:'absolute',bottom:'0px'}}><img style={{width:'100%',height:'48px',display:'absolute',button:'0px'}} src={'/images/button.jpg'}/></div>
              </div>
            </div>
          </Card>
        </Col>
        <Col span={16}>
          <Card title="选择群发对象" bordered={true}>
            <Form layout="horizontal">
              <FormItem label="分组" hasFeedback {...formItemLayout}>
                {
                  <div>
                    <Select
                      showSearch
                      defaultValue="in"
                      style={{ width: 100 }}
                      placeholder=""
                      optionFilterProp="children"
                      onChange={handleChange}
                    >
                      <Option value="in">包含</Option>
                      <Option value="not_in">排除</Option>
                    </Select>
                    <Select
                      showSearch
                      style={{ width: 200 }}
                      placeholder="选择分组"
                      optionFilterProp="children"
                      onChange={handleChange}
                      filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                    >
                      <Option value="jack">Jack</Option>
                      <Option value="lucy">Lucy</Option>
                      <Option value="tom">Tom</Option>
                    </Select>
                  </div>
                }
              </FormItem>
              <FormItem label="地区" hasFeedback {...formItemLayout}>
                {
                  <div>
                    <Select
                      showSearch
                      defaultValue="in"
                      style={{ width: 100 }}
                      placeholder=""
                      optionFilterProp="children"
                      onChange={handleChange}
                    >
                      <Option value="in">包含</Option>
                      <Option value="not_in">排除</Option>
                    </Select>

                    <Select
                      showSearch
                      style={{ width: 200 }}
                      placeholder="选择地区"
                      optionFilterProp="children"
                      onChange={handleChange}
                      filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                    >
                      <Option value="jack">Jack</Option>
                      <Option value="lucy">Lucy</Option>
                      <Option value="tom">Tom</Option>
                    </Select>
                  </div>
                }
              </FormItem>
              <FormItem label="性別" hasFeedback {...formItemLayout}>
                { <div>
                  <RadioGroup onChange={onChange} defaultValue="a">
                    <RadioButton value="a">全部</RadioButton>
                    <RadioButton value="b">男</RadioButton>
                    <RadioButton value="c">女</RadioButton>
                    <RadioButton value="d">未知</RadioButton>
                  </RadioGroup>
                  </div>
                  }
              </FormItem>
              <FormItem label="时间属性" hasFeedback {...formItemLayout}>
                {
                  <div>
                    <Select
                      showSearch
                      style={{ width: 100 }}
                      placeholder="选择时间"
                      optionFilterProp="children"
                      onChange={handleChange}
                    >
                      <Option value="jack">关注时间</Option>
                      <Option value="lucy">最近互动时间</Option>
                    </Select>
                    <RangePicker
                      ranges={{ 今天: [moment(), moment()],
                  '一周内': [moment().add(-7,'days'),moment()],
                  '两周内': [moment().add(-14,'days'),moment()],
                  '一月内': [moment().add(-1,'month'),moment()],
                  '当月': [moment().startOf('month'),moment()] }}
                      style={{ width: '75%' }} size="large" onChange={handleChange.bind('null', 'createTime')}/>
                  </div>
                }
              </FormItem>
              <FormItem label="粉丝标签" hasFeedback {...formItemLayout}>
                { <div>
                  <Button type="primary">选择标签</Button>
                </div>
                }
              </FormItem>
              <FormItem label="预计送达人数" hasFeedback {...formItemLayout}>
                { <div>
                  <span>0人</span> <Button type="primary" ghost>重置群发对象</Button>
                  <Tag color="red">仅为预估数据，实际以发送成功后记录中的人数为准</Tag>
                </div>
                }
              </FormItem>
            </Form>
          </Card>
        </Col>
      </Row>
    </div>
  )
}

AdvanceMass.propTypes = {}

export default AdvanceMass
